@import '~styles/settings';

$map-menu-items-size: rem(76px);
$map-menu-panel-height: 75vh;
$map-menu-panel-width-big: rem(560px);

.c-menu-panel {
  overflow: hidden;
  width: 100%;
  max-height: $map-menu-panel-height;
  background-color: $white;
  bottom: 0;
  position: absolute;
  box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.25);
  border-radius: rem(8px) rem(8px) 0 0;

  @media screen and (min-width: $screen-m) {
    height: 100%;
    max-height: 100%;
    width: rem($map-menu-panel-width);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
    bottom: 0;
    top: 0;
    border-radius: 0;

    &.large {
      width: $map-menu-panel-width-big;
    }
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px $border;
    height: rem(40px);
    padding: 0 rem(15px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background-color: $white;
    width: 100%;

    .icon-return {
      transform: rotate(90deg);
      width: rem(10px);
      margin-right: rem(5px);
      height: auto;
    }

    .panel-label {
      height: 100%;
      display: flex;
      align-items: center;

      span {
        font-size: rem(13px);
        text-transform: uppercase;
        font-weight: 500;
        color: $slate;
      }

      button {
        height: 100%;
      }
    }

    .panel-close {
      height: 100%;
      width: rem(40px);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      fill: $slate;
      padding-right: 0;

      .button-wrapper {
        justify-content: flex-end;
      }

      .collapsed {
        transform: rotate(180deg);
      }
    }
  }

  .panel-body {
    max-height: calc(#{$map-menu-panel-height} - 90px);
    width: 100%;
    overflow-y: auto;
    margin-top: rem(40px);
    position: relative;
    z-index: 5;

    @media screen and (min-width: $screen-m) {
      min-height: rem(250px);
      height: 100%;
      max-height: 100%;
      margin-top: 0;
    }
  }

  .close-menu {
    position: absolute;
    top: 0;
    right: 0;
    padding: rem(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
    z-index: 6;

    .icon-close-panel {
      width: rem(10px);
      height: rem(10px);
      fill: $warm-grey;
    }
  }

  .map-menu-loader {
    z-index: 2;
  }
}
